<template>
    <div class="index">
        <h1>这是第一层</h1>
        <Nest />
    </div>
</template>

<script setup lang="ts">
import { provide, ref } from 'vue'
import Nest from './Nest/index.vue'

// 注入 provide , 接收 inject  用于多层嵌套组件的传值
// provide('flag', false)    // 非响应式的
provide('flag', ref(false))  // 响应式的


</script>

<style scoped>
.index {
    margin-top: 100px;
    margin-left: 100px;
    width: 300px;
    height: 300px;
    padding: 10px;
    background-color: blueviolet;
    color: white;
}
</style>